const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCss = require("optimize-css-assets-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  mode: "development",
  // entry: "./src/index.js",
  entry: {
    index: "./src/index.js",
    login: "./src/login.js"
  },
  // output: {
  //   filename: "bundle.js",
  //   path: path.resolve(__dirname, "./dist")
  // },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // use: ["style-loader", "css-loader"],
        use: [
          // MiniCssExtractPlugin代替了style-loader，这样才能把css写到单独样式文件
          {
            loader: MiniCssExtractPlugin.loader
          },
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new OptimizeCss(), // 压缩
    new MiniCssExtractPlugin({ // 写到样式文件
      filename: "main.css",
      // chunkFilename: "[id].css" // 需要分包时
    }),
    new HtmlWebpackPlugin({ // 作用是依据模板生成html文件到打包目录，打包的html会引入相应的js、css
      template: './public/index.html' // 模板需要事先存在
    })
  ],
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist")
    },
    compress: true,
    port: 5173,
    hot: true,
    open: true // 自动打开浏览器
  },
  resolve: {
    extensions: [".js", ".css"] // 引入文件可以不写后缀
  }
}